<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>form表单</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/weui.css" />
    <link rel="stylesheet" href="css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/weui.js"></script>
    <script src="js/common.js"></script>
</head>

<body ontouchstart>
    <div class="page" id="form">
        <div class="weui-flex formTitle">
            <div class="weui-flex__item title">表单标题</div>
            <div class="formOper">
                <a href="index.html" class="iconfont icon-home"></a>
            </div>
        </div>
        <div class="formMain">
            <div class="formBox">
                <div class="weui-cells__group_form">
                    <label for="js_input1" class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
                        <div class="weui-cell__bd">
                            <input id="js_input1" class="weui-input" placeholder="填写本人微信号">
                        </div>
                    </label>
                    <label for="showPicker" class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><span class="weui-label">下拉选择</span></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="请选择" id="showPicker">
                        </div>
                    </label>
                    <!-- <label for="showActionSheet" class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><span class="weui-label">多选</span></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="请选择" id="showActionSheet">
                        </div>
                    </label> -->
                    <label for="showDatePicker" class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><span class="weui-label">创建时间</span></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="请选择时间" id="showDatePicker">
                        </div>
                    </label>
                    <div class="weui-cell weui-cell_active weui-cell_vertical">
                        <div class="weui-cell__hd"><span class="weui-label">上传文件</span></div>
                        <div class="weui-uploader__bd" style="clear: both;">
                            <ul class="weui-uploader__files" style="float: left;">
                                <li class="weui-uploader__file">
                                    <span class="weui-uploader__file__thumb" role="img" aria-label="图片标题"
                                        title="轻点两下查看大图" tabindex="0"
                                        style="background-image: url(./images/img1.png);"></span>
                                    <span class="weui-uploader__file__delete" role="button" title="删除">
                                        <i class="weui-icon-close"></i>
                                    </span>
                                </li>
                                <li class="weui-uploader__file">
                                    <span class="weui-uploader__file__thumb" role="img" aria-label="图片标题"
                                        title="轻点两下查看大图" tabindex="0"
                                        style="background-image: url(./images/img1.png);"></span>
                                    <span class="weui-uploader__file__delete" role="button" title="删除">
                                        <i class="weui-icon-close"></i>
                                    </span>
                                </li>
                                <li class="weui-uploader__file">
                                    <span class="weui-uploader__file__thumb" role="img" aria-label="图片标题"
                                        title="轻点两下查看大图" tabindex="0"
                                        style="background-image: url(./images/img1.png);"></span>
                                    <span class="weui-uploader__file__delete" role="button" title="删除">
                                        <i class="weui-icon-close"></i>
                                    </span>
                                </li>
                            </ul>
                            <div class="weui-uploader__input-box" style="float: left;">
                                <input id="uploaderInputWithDelete" class="weui-uploader__input" type="file"
                                    accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                    <label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
                        <div class="weui-cell__hd"><span class="weui-label">备注</span></div>
                        <div class="weui-cell__bd">
                            <textarea class="weui-textarea" id="js_input4" placeholder="请输入备注" rows="3"></textarea>
                        </div>
                    </label>
                </div>
                <div class="btnBox">
                    <button class="weui-btn weui-btn_primary" onclick="submitForm()">提交</button>
                </div>
            </div>
            <div class="weui-footer">
                <p class="weui-footer__text">底部公司信息</p>
            </div>
        </div>
    </div>
    <div class="bigImgBox">
        <img class="bigImg" id="bigImg" src="" alt="大图">
        <span class="iconfont icon-close-r"></span>
    </div>
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <!-- 成功 -->
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <!-- waring -->
            <!-- <i class="weui-icon-warn weui-icon_toast"></i> -->
            <!-- 加载中 -->
            <!-- <i class="weui-primary-loading weui-icon_toast"></i> -->
            <p class="weui-toast__content">不知道文案有多长，索爷测试下看看难呢过不能xunasmajsdjas萨达撒大所</p>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#showActionSheet").on('click', function () {
            weui.actionSheet([
                {
                    label: '拍照',
                    onClick: function () {
                        console.log('拍照');
                    }
                },
                {
                    label: '从相册选择',
                    onClick: function () {
                        console.log('从相册选择');
                    }
                },
                {
                    label: '其他',
                    onClick: function () {
                        console.log('其他');
                    }
                }
            ], [
                {
                    label: '取消',
                    onClick: function () {
                        console.log('取消');
                    }
                },
                {
                    label: '确认',
                    onClick: function () {
                        console.log('取消');
                    }
                }
            ], {
                className: 'custom-classname',
                title: '请选择',
                onClickMask: function () {
                    console.log('点击了遮罩层');
                }
            });
        })
        $('#showPicker').on('click', function () {
            weui.picker([{
                label: '飞机票',
                value: 0
            }, {
                label: '火车票',
                value: 1
            }, {
                label: '的士票',
                value: 2
            }, {
                label: '公交票 (disabled)',
                value: 3
            }, {
                label: '其他',
                value: 4
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $("#showPicker").val(result[0].label)
                },
                title: '单列选择器'
            });
        });
        $('#showDatePicker').on('click', function () {
            weui.datePicker({
                start: 2000,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    console.log(result);

                },
                onConfirm: function (result) {
                    console.log(result);
                    let time = ''
                    result.filter(v => {
                        time += v.label
                    })
                    $('#showDatePicker').val(time)
                },
                title: '请选择时间'
            });
        });
        $(".weui-uploader__file__thumb").off('click').on('click', function (e) {
            e.stopPropagation()
            e.preventDefault()
            let imgUrl = $(this).eq(0).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
            $("#bigImg").attr('src', imgUrl);
            $(".bigImgBox").fadeIn();
            $(".bigImgBox").off('click', '.icon-close-r').on('click', '.icon-close-r', function () {
                $(".bigImgBox").fadeOut();
            })
        });
        $(".weui-uploader__file__delete").off('click').on('click', function (e) {
            e.stopPropagation()
            e.preventDefault()
            var file = $(this).parent();
            weui.confirm('确定删除吗？', {
                title: '提示',
                buttons: [
                    { label: '取消', type: 'default' },
                    {
                        label: '确定', type: 'primary', onClick: function (e) {
                            debugger
                            file.remove()
                        }
                    }
                ]

            });
        });
    });
    function submitForm() {
        $.myToast({
            content: '提交成功',
            type: 'success',
            duration: 3000,
            callback() {
                //关闭回调
            }
        })
    }
</script>

</html>